<template>
  <div>
    <div class="tab-class">
      <div class="first-tab" :class="{'tab-active': !hasDone}" @click="changeStatus(false)">未评分</div>
      <div class="second-tab" :class="{'tab-active': hasDone}" @click="changeStatus(true)">已评分</div>
    </div>
    <el-table :height="tableHeight" :data="myTableData" border style="width: 100%">
      <el-table-column label="序号" type="index" width="96" align="center"></el-table-column>
      <el-table-column label="项目名称" prop="projectName" min-width="130" align="center"></el-table-column>
      <el-table-column label="项目简介" prop="projectRemark" min-width="160" align="center"></el-table-column>
      <el-table-column label="考核名称" prop="evItemName" min-width="160" align="left" header-align="center"></el-table-column>
      <el-table-column label="考核内容描述" min-width="220" align="left" header-align="center">
        <template slot-scope="scope">
          <div style="white-space: pre-line;">{{scope.row.evItemContent}}</div>
        </template>
      </el-table-column>
      <el-table-column label="项目成员" prop="members" min-width="110" align="center"></el-table-column>
      <el-table-column label="分数" align="center" width="100">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.scores && scope.row.status  === 5" @click="openAssessDialog(scope.row)" type="text" size="small">评分</el-button>
          <span v-if="scope.row.scores">{{scope.row.scores}}<i v-if="scope.row.status === 5" @click="openAssessDialog(scope.row)" class="el-icon-edit-outline" style="margin-left:5px;color:#66b1ff;cursor:pointer;"></i></span>
        </template>
      </el-table-column>
      <el-table-column label="评分详情" prop="remark" min-width="130" align="left" header-align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="myPageConfig.pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="myPageConfig.pageSize"
      :total="myPageConfig.totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <el-dialog title="评分窗口" :visible.sync="assessDialog" width="600px"> 
      <el-form :model="form" style="padding-right:100px;" label-width="120px">
        <el-form-item label="分数：">
          <el-rate v-model="form.scores" :max="10" style="margin-top:8px;"></el-rate>
        </el-form-item>
        <el-form-item label="评分依据：">
          <el-input type="textarea" :rows="5" placeholder="请输入评分的依据" v-model="form.remark"></el-input>
        </el-form-item>
        <p class="notice">注：要求评分公正、公平、严谨，评分范围0-10星。如发现有徇私舞弊现象，将追究责任。</p>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="assessDialog = false">取 消</el-button>
        <el-button type="primary" @click="assess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import formUtil from '@/utils/formUtil';
  import dingMixin from  '@/mixins/ding'

  export default {
    data() {
      return {
        myTableData: [],
        assessDialog: false,
        form: {
          scores: 0,
          remark: '',
          scoresId: ''
        },
        myPageConfig:{
          pageIndex: 1,
          pageSize: 10,
          totalPage: 0
        },
        hasDone: false,
        tableHeight: window.tableHeight
      };
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 250
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 250
      }
    },
    mixins: [dingMixin],
    mounted() {
      this.searchList(true);
    },
    methods: {
      sizeChangeHandle (val) {
        this.myPageConfig.pageSize = val
        this.searchList(true)
      },
      currentChangeHandle (val) {
        this.myPageConfig.pageIndex = val
        this.searchList()
      },
      openAssessDialog(kpiItem) {
        this.assessDialog = true;
        this.form.scores = kpiItem.scores ? kpiItem.scores: 0;
        this.form.remark = kpiItem.remark ? kpiItem.remark: '';
        this.form.scoresId = kpiItem.scoreId;
      },
      async searchList(init) {
        if(init) this.myPageConfig.pageIndex = 1;
        let {list, totalCount} = await this.$httpN.postB('pde/scores/getTask',{
          'page': this.myPageConfig.pageIndex,
          'hasDone': this.hasDone,
          'limit': this.myPageConfig.pageSize,
          dingId: this.userInfo.dingId
        })
        this.myTableData = list;
        this.myPageConfig.totalPage = totalCount;
      },
      async assess() {
        if(!await this.$httpN.postQ('pde/scores/give', this.form)) return;
        formUtil.submitSuccess('打分成功');
        this.assessDialog = false;
        this.searchList();
      },
      changeStatus(type) {
        if(this.hasDone === type) return;
        this.hasDone = type;
        this.searchList('init');
      },
    }
  };
</script>
<style lang="scss" scoped>
  .notice{
    margin-top:10px;
    color:red;
    padding-left:120px;
  }
  .tab-class{
    width: 100%;
    border-bottom: 1px solid #e4e7ed;
    font-size:0;
    margin-bottom:-1px;
    div{
      display:inline-block;
      width: 96px;
      line-height:40px;
      border: 1px solid #e4e7ed;
      text-align: center;
      margin-bottom: -1px;
      color:#303133;
      font-size:14px;
      cursor: pointer;
      background:#F5F7FA;
      &:hover{
        color:#409eff;
      }
    }
    .first-tab{
      border-radius: 4px 0 0 0;
      border-right:0;
    }
    .second-tab{
      border-radius: 0 4px 0 0;
    }
    .tab-active{
      color:#409eff;
      border-bottom:1px solid white;
      background: white;
    }
  }
</style>